<!-- 答题组件 : 问题类型考虑是否用字典里的-->
<!-- 想了下 还是要再拆开,然后再组成 -->
<template>
  <div>
    {{ checkBoxList }}
    <div v-for="(v, i) in list" :key="v.questionId">
      <!-- {{ i + 1 }} {{ v.questionTitle }} -->
      <div style="line-height: 1.8">
        <!-- 单选 -->
        <div v-if="v.questionType == 1">
          <span>{{ i + 1 }} </span>
          <span
            class="answer-title"
            v-html="'<strong> : </strong> ' + v.questionTitle"
          ></span>
          <div class="answer-content">
            <el-radio-group v-model="answer[v.questionId]">
              <el-radio
                v-for="item in JSON.parse(v.questionItems)"
                :key="item.prefix"
                :label="item.prefix"
                >{{ item.prefix }}、
                <span v-html="item.content" class="item-content"></span>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 多选 -->
        <div v-if="v.questionType == 2">
          <span>{{ i + 1 }} </span>
          <span
            class="answer-title"
            v-html="'<strong> : </strong> ' + v.questionTitle"
          ></span>
          <div class="answer-content">
            <el-checkbox-group v-model="checkBoxList">
              <el-checkbox
                v-for="item in JSON.parse(v.questionItems)"
                :key="item.prefix"
                :label="item.prefix"
                v-model="answer[v.questionId]"
                >{{ item.prefix }}、 {{ item.content }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <!-- 判断 -->
        <div v-if="v.questionType == 3">
          <span>{{ i + 1 }}</span>
          <span
            class="answer-title"
            v-html="'<strong> : </strong> ' + v.questionTitle"
          ></span>
          <div class="answer-content">
            <el-radio-group v-model="answer[v.questionId]">
              <el-radio
                v-for="item in JSON.parse(v.questionItems)"
                :key="item.prefix"
                :label="item.prefix"
                >{{ item.prefix }}、
                <span v-html="item.content" class="item-content"></span>
              </el-radio>
            </el-radio-group>
          </div>
        </div>

        <!-- 填空 -->
        <div v-if="v.questionType == 5">
          <span>{{ i + 1 }}</span>
          <span
            class="answer-title"
            v-html="'<strong> : </strong> ' + v.questionTitle"
          ></span>
          <div class="answer-content">
            <el-input
              style="width: 50%"
              v-model="answer[v.questionId]"
              type="textarea"
              maxlength="100"
              show-word-limit
              :rows="2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "answer",
  props: {
    //   答题列表数据
    list: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      answer: {},
      checkBoxList: [],
      radio: null,
    };
  },
};
</script>
